---
title: Linear Gradient
date: 2023-07-12
description: A linear gradient that can be used as a background for a component.
author: dillionverma
published: true
video: https://cdn.magicui.design/linear-gradient.mp4
---

<ComponentPreview name="linear-gradient-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/linear-gradient.tsx
```

<ComponentSource name="linear-gradient" />

</Steps>

## Props

### Linear Gradient

| Prop            | Type   | Description                                                                             | Default               |
| --------------- | ------ | --------------------------------------------------------------------------------------- | --------------------- |
| from            | string | The starting color of the gradient                                                      | #00000000             |
| to              | string | The ending color of the gradient                                                        | rgba(120,119,198,0.3) |
| width           | string | The width of the gradient                                                               | 100%                  |
| height          | string | The height of the gradient                                                              | 100%                  |
| transitionPoint | string | The point at which the gradient transitions from the starting color to the ending color | 50%                   |
| direction       | string | The direction of the gradient                                                           | bottom                |
| className       | string | The class name of the component                                                         | ""                    |
